<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转魔方</title>
	<style>
	      *{margin:0;padding:0;}
		  .container{
                width:500px;
                height:500px;
                border:1px #fff solid;
                margin:0 auto;
                position:relative;
                transform-style:preserve-3d;
		  	    perspective:500px;
		  	    perspective-origin:50% 50%;
		  }
		  .box{
		  	width:200px;
		  	height:200px;
		  	border:1px solid;
		  	margin-top:150px;
		  	margin-left:150px;
		  	transform-style: preserve-3d;
		  	animation:mofang_ani 5s infinite linear;
		  }
		  .container>.box>div{
		  	width:200px;
		  	height:200px;
		  	border:1px solid;
		  	background-color:rgba(5,5,5,0.3);
		  	text-align:center;
		  	line-height:200px;
		  	position:absolute;
		  }
		  .d1{
		  	transform:rotateX(90deg)
		  	translateZ(100px);
		  }
		  .d2{
		  	transform:rotateX(90deg)
		  	translateZ(-100px);
		  }
		  .d3{
		  	transform:rotateY(90deg)
		  	translateZ(100px);
		  }
		  .d4{
		  	transform:rotateY(90deg)
		  	translateZ(-100px);
		  }
		  .d5{
		  	transform:translateZ(-100px);
		  }
		  .d6{
		  	transform:translateZ(100px);
		  }
		  @keyframes mofang_ani{
			0%{transform:rotateY(0) rotateX(0);}

			100%{transform:rotateY(360deg) rotateX(360deg);}
		  }


	</style>
</head>
<body>
	  <div class="container">
	  	    <div class="box">
	  	    <div class="d1"><img src="./images/01.jpg" width="200"height="200"></div>
	  	    <div class="d2"><img src="./images/02.jpg" width="200"height="200"></div>
	  	    <div class="d3"><img src="./images/03.jpg" width="200"height="200"></div>
	  	    <div class="d4"><img src="./images/04.jpg" width="200"height="200"></div>
	  	    <div class="d5"><img src="./images/05.jpg" width="200"height="200"></div>
	  	    <div class="d6"><img src="./images/06.jpg" width="200"height="200"></div>
	  	    </div>
	  </div>
</body>
</html>